<template>
  <view class="classify-container" pageBg>
    <!-- 使用带搜索功能的导航栏 -->
    <custom-nav-bar title="分类"></custom-nav-bar>
    
    <!-- 分类标签（吸顶效果） -->
    <view class="sticky-container">
      <scroll-view scroll-x class="category-tabs" :scroll-left="scrollLeft">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="['tab-item', activeTab === index ? 'active' : '']"
          @click="switchTab(index)"
          :id="'tab_' + index"
        >
          {{ tab }}
        </view>
      </scroll-view>
    </view>
    
    <!-- 主题列表 -->
    <scroll-view 
      scroll-y 
      class="theme-scroll"
      :style="{height: scrollHeight + 'px'}"
      @scrolltolower="loadMore"
    >
      <view class="theme-list">
        <theme-item 
          v-for="(item, index) in themeList" 
          :key="item.id"
          :title="item.title"
          :count="item.count + '张'"
          :update-time="item.updateTime"
          :image-url="item.imageUrl"
          @click="navigateToDetail(item.id)"
        />
      </view>
      
      <!-- 加载状态 -->
      <uni-load-more 
        :status="loadStatus" 
        :icon-size="16"
        :content-text="{
          contentdown: '上拉加载更多',
          contentrefresh: '加载中',
          contentnomore: '没有更多了'
        }"
      />
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 分类标签数据
const tabs = ref(['全部', '精选', '风景', '动漫', '人物', '动物', '游戏', '文字', '艺术', '科技']);
const activeTab = ref(0);
const scrollLeft = ref(0);

// 主题列表数据
const themeList = ref([]);
const page = ref(1);
const loadStatus = ref('more');
const scrollHeight = ref(0);

// 计算可滚动区域高度
const calculateHeight = () => {
  const systemInfo = uni.getSystemInfoSync();
  const query = uni.createSelectorQuery().in(this);
  query.select('.sticky-container').boundingClientRect(data => {
    // 减去导航栏总高度和状态栏高度
    scrollHeight.value = systemInfo.windowHeight - data.height - data.top;
  }).exec();
};

// 初始化数据
const initData = () => {
  loadStatus.value = 'loading';
  // 模拟异步加载
  setTimeout(() => {
    const newData = Array.from({length: 10}, (_, i) => ({
      id: page.value * 10 + i + 1,
      title: ['自然风光', '动漫合集', '城市建筑', '星空宇宙'][i % 4] + (page.value > 1 ? `-${page.value}` : ''),
      count: Math.floor(Math.random() * 100) + 50,
      updateTime: `${Math.floor(Math.random() * 30) + 1}天前更新`,
      imageUrl: `/static/themes/theme${i % 6 + 1}.jpg`
    }));
    
    themeList.value = page.value === 1 ? newData : [...themeList.value, ...newData];
    loadStatus.value = newData.length < 10 ? 'noMore' : 'more';
    
    // 切换回第一页时自动滚动到顶部
    if(page.value === 1) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    }
  }, 800);
};

// 切换分类标签
const switchTab = (index) => {
  activeTab.value = index;
  page.value = 1;
  
  // 滚动标签到可视区域
  uni.createSelectorQuery().select(`#tab_${index}`).boundingClientRect(res => {
    scrollLeft.value = res.left - 50;
  }).exec();
  
  initData();
};

// 加载更多
const loadMore = () => {
  if(loadStatus.value !== 'more') return;
  page.value += 1;
  initData();
};

// 跳转到详情页
const navigateToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/theme-detail/theme-detail?id=${id}`
  });
};

onMounted(() => {
  calculateHeight();
  initData();
  
  // 横竖屏切换时重新计算高度
  uni.onWindowResize(() => {
    calculateHeight();
  });
});
</script>

<style lang="scss" scoped>
.classify-container {
  background-color: #f9f9f9;
  min-height: 100vh;
  box-sizing: border-box;
}

.sticky-container {
  background-color: #fff;
  position: sticky;
  top: var(--nav-height); /* 使用导航栏总高度 */
  z-index: 10;
  padding: 20rpx 30rpx 0;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.category-tabs {
  white-space: nowrap;
  width: 100%;
  
  .tab-item {
    display: inline-block;
    padding: 12rpx 30rpx;
    margin-right: 20rpx;
    border-radius: 40rpx;
    background-color: #f0f0f0;
    color: #666;
    font-size: 28rpx;
    transition: all 0.3s;
    
    &:last-child {
      margin-right: 0;
    }
    
    &.active {
      background-color: #28b389;
      color: white;
      font-weight: 500;
      transform: scale(1.05);
    }
  }
}

.theme-scroll {
  padding: 30rpx;
  box-sizing: border-box;
}

.theme-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding-bottom: 30rpx;
}

/* 加载更多样式调整 */
:deep(.uni-load-more) {
  margin: 0 auto;
  padding: 20rpx 0;
  
  .uni-load-more__text {
    font-size: 26rpx;
    color: #999;
  }
  
  .uni-load-more__img {
    width: 32rpx !important;
    height: 32rpx !important;
  }
}
</style>